<template>
  <div class="approval-product">
    <div class="approval-product__item" v-for="item in list" @click="checkProduct(item)">
      <div class="approval-product__img" v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}"></div>
      <div class="approval-product__body">
        <div class="approval-product__name">
          {{item.waterName}}
        </div>
        <div class="approval-product__sell">
          销量:{{item.sales}}
        </div>
        <div class="approval-product__sell">
          进货价:￥{{item.price}}
        </div>
      </div>
      <div class="approval-product__chk">
        <van-checkbox v-model="item.checked"></van-checkbox>
      </div>
    </div>
    <div class="approval-product__btn">
      <van-button type="primary" @click="delApproval">撤销审核</van-button>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import {
    PRODUCT_LIST,
    PRODUCT_DEL_APPROVAL
  } from '@/api/product';
  export default {
    computed: {
      ...mapState(['stationInfo'])
    },
    data() {
      return {
        checked: true,
        list: []
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.$reqPost(PRODUCT_LIST, {
          stationId: this.stationInfo.id,
          verify: 1,
          state: 1,
          own: 2
        }).then(res => {
          res.data.waterList.forEach(element => {
            element.checked = false;
          });
          this.list = res.data.waterList;
        })
      },
      checkProduct(item) {
        item.checked = !item.checked;
      },
      delApproval() {
        let list = this.list.filter(el => {
          return el.checked;
        });
        if (list.length !== 0) {
          this.$reqPost(PRODUCT_DEL_APPROVAL, new URLSearchParams({
            stationId: this.stationInfo.id,
            waterId: list[0].waterId,
          })).then(res => {
            console.log(res);
          });
        } else {
          this.$toast('请选择商品')
        }
      }
    }
  }

</script>

<style lang="less" scoped>
  .approval-product__item {
    display: flex;
    background: #ffffff;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;

    .approval-product__img {
      flex: 0 0 60px;
      background: url('../../assets/product.png') no-repeat center contain;
    }

    .approval-product__body {
      flex: 1;

      .approval-product__sell {
        margin-top: 5px;
        color: #999;
        font-size: 12px;
      }
    }

    .approval-product__chk {
      display: flex;
      align-items: center;
    }
  }

  .approval-product__btn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    button {
      width: 100%;
    }
  }

</style>
